<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/png" href="/static/img/favicon.png">

  <title>Mycodo {{mycodo_version}} - {{host}}{% block title %}{% endblock %}</title>

  <link href="/static/css/bootstrap.min.css" rel="stylesheet">

  {% if current_user.theme in dark_themes %}
    <link href="/static/css/custom-dark.css" rel="stylesheet">
  {% else %}
    <link href="/static/css/custom-light.css" rel="stylesheet">
  {% endif %}

  <link href="/static/css/custom.css" rel="stylesheet">
  <script src="/static/js/jquery-3.4.1.min.js"></script>
  <script src="/static/js/fontawesome-all.min.js"></script>
  <script src="/static/js/popper.min.js"></script>

  {% if current_user.theme != '' %}
    <link href="/static/css/bootstrap-4-themes/{{current_user.theme}}.css" rel="stylesheet">
  {% endif %}

  {% block head %}{% endblock %}
  </head>
  <body>
    
    {% set active_page = active_page|default('setup') -%}

    <nav id="nav-respond" class="navbar navbar-expand-md{% if current_user.theme in dark_themes %} navbar-dark bg-dark{% else %} navbar-light bg-light{% endif %}">

      <a class="navbar-brand" id="daemon-status" data-toggle="tooltip" data-placement="bottom" href="{{url_for('routes_page.page_info')}}" style="text-align: center; padding: 0 15px; font-size: 0.8em; font-weight: bold; color: #4E9258">Remote<br/>Admin</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">

        <ul class="navbar-nav mr-auto">
          <li class="nav-item{% if active_page == 'setup' %} active{% endif %}">
            <a class="nav-link" href="{{url_for('routes_remote_admin.remote_setup')}}">{{_('Setup')}}</a>
          </li>
          <li class="nav-item{% if active_page == 'input' %} active{% endif %}">
            <a class="nav-link" href="{{url_for('routes_remote_admin.remote_input')}}">{{_('Input')}}</a>
          </li>
        </ul>

        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/">{{_('Exit')}}</a>
          </li>
        </ul>

      </div>
    </nav>

    {%- block body %}{% endblock -%}

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/bootstrap.min.js"></script>
  </body>
</html>
